<template>
  <!-- 评价管理 -->
  <baseslot :show-search-box="false">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="90"
        :add-active="addActive"
        :has-add="false"
        :del-active="delActive"
        :has-del="false"
        :edit-active="editActive"
        :has-edit="false"
        :cancel-active="cancelActive"
        :has-cancel="false"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:table-box>
      <div class="nowpage-select-but-sty">
        <selectbutton
          :buttonselectlist="buttonselectlist"
          @nowselectbuttonindex="nowselectbuttonindex"
        />
      </div>
      <!-- <div class="nowpage-bar-sty">
        <topnewbar :nowbarcontent="nowbarcontent" />
      </div>-->
      <div v-if="true" class="nowpage-main-box">
        <el-table
          ref="tableData"
          :data="tableList"
          class="table_content"
          height="calc(100% - 100px)"
          border
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          :header-cell-style="headerColor"
          style="width:100%"
        >
          <el-table-column
            label="指标名称"
            width="200"
            prop="evaluationIndexName"
            :show-overflow-tooltip="true"
            align="center"
          >
            <!-- //产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉） -->
            <template slot-scope="scope">
              <div
                style="width:180px !important"
                :style="
                  'height:' +
                    scope.row.evaluationIndexNamecount * 40 +
                    'px;line-height:' +
                    scope.row.evaluationIndexNamecount * 40 +
                    'px'
                "
                :class="
                  scope.row.evaluationIndexNamenumber % 2 === 0
                    ? 'blue text_ellipsis'
                    : 'white text_ellipsis'
                "
              >{{ scope.row.evaluationIndexName }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="evaluationContent" label="评分内容" :show-overflow-tooltip="true">
            <!-- //评分标准同指标使用插槽原因一样 -->
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                    scope.row.evaluationContentIdcount * 40 +
                    'px;'
                "
                :class="
                  scope.row.evaluationContentIdnumber % 2 === 0
                    ? 'white text_ellipsis'
                    : 'blue text_ellipsis'
                "
              >{{ scope.row.evaluationContent }}</div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="technical"
            align="center"
            label="评价标准"
          />
          <el-table-column
            prop="deduction"
            width="140"
            align="center"
            :show-overflow-tooltip="true"
            label="评价分数"
          >
            <template slot-scope="scope">
              <div style="width:120px !important">{{ scope.row.deduction }}分/项</div>
            </template>
          </el-table-column>
          <el-table-column prop="result" align="right" :show-overflow-tooltip="true" label="实际结果">
            <template slot-scope="scope">
              <!-- <el-checkbox-group v-model="tableList[scope.$index].checkedstau" :max="1">
                <el-checkbox
                  v-for="checkitem in checkboxlist"
                  :key="checkitem.value"
                  :label="checkitem.name"
                  :value="checkitem.value"
                >{{ checkitem.name }}</el-checkbox>
              </el-checkbox-group>-->
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="right"
            prop="finallyScore"
            label="实际评分"
          >
            <template slot-scope="scope">
              <!-- <div @click="setfinallyScoremet(scope.$index)">{{scope.row.finallyScore}}</div> -->
              <div class="noborderinput">
                <el-input
                  v-model="tableList[scope.$index].finallyScore"
                  type="number"
                  clearable
                  @change="setfinallyScoremet(scope.$index)"
                />
              </div>
              <!-- <el-button @click="printtablemessage(scope)">test</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
    </template>
  </baseslot>
</template>
<script>
import topbarreq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-indicator/index";
import nowpagereq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-temple-manage/index";
import addreq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-manage/index";
// import topnewbar from "../components/topnewbar.vue"
import baseslot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import Pagination from "@/components/Pagination";
import selectbutton from "@/components/selectbutton/index.vue";
import ActionBar from "@/components/ActionBar/index.vue";
import { mymixin } from "@/utils/mixin";
import { getToken } from "@/utils/auth";
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: "evaluationManage",
  components: { baseslot, Pagination, selectbutton, ActionBar },
  mixins: [mymixin],
  data() {
    return {
      topbarlist: [],
      buttonselectlist: [{ name: "基本信息评价" }, { name: "行业指标评价" }],
      nowbarcontent: 895,
      tableList: [],
      // 选择框
      checkboxlist: [
        { name: "不符合", value: 0 },
        { name: "符合", value: 1 }
      ],
      // 当前选中顶部按钮index
      nowbuttonselectindex: 0,
      tabledata: [
        {
          evaluationIndexName: "主体信息", // 指标名称
          evaluationContentId: "1", // 主要用于评分内容归类
          evaluationContent:
            "基本信息应有:主体名称、统一社会信用代码(主体个人身份证)、生产地址（或注册地址）、主体类别、法人代表（生产者）、联系方式、地理坐标、种养类型、种养总规模（10分）",
          technical: "主体名称", // 评价标准
          deduction: "-2分/项", // 评价分数
          result: "不符合", // 实际结果
          finallyScore: "8" // 实际评分
        },
        {
          evaluationIndexName: "主体信息",
          evaluationContentId: "1", // 主要用于评分内容归类
          evaluationContent: "每缺填一项-3分", // 评分内容
          technical: "统一社会信用代码", // 评价标准
          deduction: "-1分/项",
          result: "符合",
          finallyScore: "18"
        },
        {
          evaluationIndexName: "主体信息", // 指标名称
          evaluationContentId: "2", // 主要用于评分内容归类
          evaluationContent: "产品信息应有:产品种类、产品种养规模（15分）", // 评分内容
          technical: "产品种类", // 评价标准
          deduction: "-3分/项",
          result: "符合",
          finallyScore: "15"
        },
        {
          evaluationIndexName: "主体信息", // 指标名称
          evaluationContentId: "3", // 主要用于评分内容归类
          evaluationContent: "产品种养规模信息不齐全（10分）", // 评分内容
          technical: "产品规模", // 评价标准
          deduction: "-4分/项", // 评价分数
          result: "不符合", // 实际结果
          finallyScore: "6" // 实际评分
        }
      ]
    };
  },
  watch: {
    nowbuttonselectindex(newvalueone) {
      this.getTableDataList();
    }
  },
  created() {
    this.gettopbarbuttonmessage();
    // this.getTableDataList()
  },
  methods: {
    printtablemessage() {
      // console.log(this.tableList)
    },
    // 获取表格数据
    async getTableDataList() {
      this.saveActive = true;
      // this.tableList = this.listHandle(this.tabledata)
      let id = this.topbarlist[this.nowbuttonselectindex].evaluationIndexId;
      let resone = await nowpagereq.getlist(id);
      let listone = resone.data;
      // console.log(listone)
      listone.forEach((item, index) => {
        listone[index].checkedstau = [];
        listone[index].finallyScore = 0;
      });
      this.tableList = this.listHandle(listone);
      console.log(this.tableList);
      this.totalSize = resone.data.length;
    },
    // 获取按钮选择数据
    gettopbarbuttonmessage() {
      topbarreq.querybyconditlist().then(res => {
        this.topbarlist = res.data;
        this.buttonselectlist = [];
        this.topbarlist.forEach((item, index) => {
          this.buttonselectlist.push({ name: item.evaluationIndexName });
        });
        this.getTableDataList();
      });
    },
    // 点击保存方法--主要用于评价的分数
    save() {
      let addlist = {
        evaluationContentVOList: [],
        evaluationIndexId: this.topbarlist[this.nowbuttonselectindex]
          .evaluationIndexId,
        name: this.dateToFormattwo(new Date()) + "的评价",
        organizationNo: getToken("organizationNo")
      };
      this.tableList.forEach((item, index) => {
        let mesageone = {
          deduction: item.deduction,
          evaluationContent: item.evaluationContent,
          evaluationContentId: item.evaluationContentId,
          evaluationIndexId: item.evaluationIndexId,
          evaluationIndexName: item.evaluationIndexName,
          evaluationScore: item.evaluationScore,
          evaluationTechnicalId: item.evaluationTechnicalId,
          finallyScore: item.finallyScore,
          result: item.checkedstau[0] || "",
          technical: item.technical
        };
        if (mesageone.result === "不符合") {
          mesageone.result = false;
        } else if (mesageone.result === "符合") {
          mesageone.result = true;
        }
        addlist.evaluationContentVOList.push(mesageone);
      });
      addreq
        .addlist(addlist)
        .then(res => {
          if (res.code === 1) {
            this.$message.success("添加成功！");
          } else {
            this.$message.warning("添加失败！");
          }
          // console.log(res)
        })
        .catch(err => {
          this.$message.warning("添加失败！");
          console.log(err);
        });
      // console.log(addlist)
    },
    // 输入评分时触发方法
    setfinallyScoremet(i) {
      var setconuntindex = this.tableList[i].evaluationContentIdcount + i;
      var newi = i;
      for (newi; newi < setconuntindex; newi++) {
        this.tableList[newi].finallyScore = this.tableList[i].finallyScore;
      }
    },
    // 按钮当前选择index
    nowselectbuttonindex(i) {
      this.nowbuttonselectindex = i;
    },
    // 选择页面size
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    // 选择页面page
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    // -----单元合并处理相关-------
    // 合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0) {
        // evaluationIndexNamecount是需要合并的字段（这里第一列合并的字段是evaluationIndexNamecount，evaluationIndexNamecount是经过this.$listHandle处理过的数据，是主体信息的合并的个数）
        // 如果合并的个数大于1的话
        if (row.evaluationIndexNamecount > 1) {
          return {
            rowspan: row.evaluationIndexNamecount,
            colspan: 1
          };
        } else if (row.evaluationIndexNamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第二列与第一列同理
      //   if (columnIndex === 1) {
      //     if (row.evaluationContentcount > 1) {
      //       return {
      //         rowspan: row.evaluationContentcount,
      //         colspan: 1
      //       };
      //     } else if (row.evaluationContentcount === 1) {
      //       return {
      //         rowspan: 1,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
      if (columnIndex === 1) {
        if (row.evaluationContentIdcount > 1) {
          return {
            rowspan: row.evaluationContentIdcount,
            colspan: 1
          };
        } else if (row.evaluationContentIdcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第六列与第一列同理
      if (columnIndex === 5) {
        if (row.evaluationContentIdcount > 1) {
          return {
            rowspan: row.evaluationContentIdcount,
            colspan: 1
          };
        } else if (row.evaluationContentIdcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 表格头部颜色
    headerColor({ rowIndex, columnIndex }) {
      return this.headerColormetod(rowIndex);
    },
    // 改变合计那一行的背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.technical === "合计") {
        return "hang";
      }
      return this.tableRowClassNamemethodes(rowIndex);
    },
    // 转化下请求回来的数据
    listHandle(list) {
      for (var key in list[0]) {
        var k = 0;
        var j = 0;
        while (k < list.length) {
          list[k][key + "count"] = 1;
          list[k][key + "number"] = j;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][key] === list[i][key] && list[k][key] !== "") {
              list[k][key + "count"]++;
              list[i][key + "count"] = 0;
              list[i][key + "number"] = j;
            } else {
              break;
            }
          }
          j++;
          k = i;
        }
      }
      return list;
    },
    headerColormetod(rowIndex) {
      if (rowIndex === 0) {
        return { background: "#006e91", color: "#fff" };
      } else {
        return { background: "#bd1a1a", color: "#fff" };
        // return { color: "#fff" };
      }
    },
    // 斑马条纹（bg和bgnone为类名，可以在类名写样式）
    tableRowClassNamemethodes(rowIndex) {
      if (rowIndex % 2 === 0) {
        return "bg";
      } else {
        return "bgnone";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.nowpage-select-but-sty {
  width: 98%;
  margin-left: 1%;
  height: 40px;
  // background-color: chartreuse;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 6;
  margin-bottom: 40px;
}
.noborderinput {
  ::v-deep .el-input__inner {
    border: none;
    text-align: center;
  }
}
.nowpage-bar-sty {
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 6;
  padding-left: 10px;
}
.nowpage-main-box {
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
  z-index: 5;
  top: -55px;
  padding-top: 60px;
  padding-left: 1%;
  padding-right: 1%;
  border: #0ec497 1px dashed;
  // background-color: #00485a;
}
</style>
<style scoped lang="scss">
// 单元格样式
::v-deep .el-table__body {
  height: auto !important;
}
.text_ellipsis {
  white-space: pre-wrap;
  width: 80px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}
::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
  //   color:#bd1a1a;
}
.blue {
  //   background: #0cc415;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
.white {
  //   background: #bd1a1a;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
